<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MinnanoNihongo Grammar</title>
<!-- jQuery Mobile references -->

<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css" />
<script src="js/jquery-2.1.0.min.js"></script>
<script src="js/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="js/localstorage.js"></script>
<script type="text/javascript" src="js/search.js"></script>


<style>
#wrap {
	text-align: center
}


#wrap span {
	display: inline-block;
	text-align: left;
	text-indent:50px;
	font-family:"Times New Roman", Times, serif;
	font-style:normal;
	font-size:14px;
	font-weight:normal;
}

#wrap span.kanji, span.mean_kanji {
	width: 180px;
}

#wrap span.mean_vi, span.mean_en {
	width: 280px;
}


#wrap span {
	display: inline;
}

#wrap>span {
	display: inline-block;
}

.ui-grid-a {
	width: 100%;
}

.ui-block-a {
	width: 80% !important;
	height: 80px !important;
	min-height: 2.5em !important;
}

.ui-block-b {
	width: 20% !important;
}

#input-search {
	height: 40px !important;
}

#btnSearch {
	height: 40px !important;
}
</style>

<script type="text/javascript">
	$(document).ready(function() {
		/* var searchSelected = getLocalStorage('searchSelected');
		if(searchSelected == null ){
			setLocalStorage('searchSelected','kanji');
		}else{
			switch (searchSelected) {
			case 'kanji':
				$("#input-search").attr('section', 'kanji');
				break;
			case 'vocabulary':
				$("#input-search").attr('section', 'vocabulary');
				break;
			case 'grammar':
				$("#input-search").attr('section', 'grammar');
				break;
			}
		} */
		
		
		
		var searchSelected = getLocalStorage('searchSelected');
		if(searchSelected == null ){
			setLocalStorage('searchSelected','kanji');
		}else{
			switch (searchSelected) {
			case 'kanji':
				$("#select-search-button span").text("Kanji");
				$("#input-search").attr('section', 'kanji');
				setLocalStorage('searchSelected','kanji');
				break;
			case 'vocabulary':
				$("#select-search-button span").text("Vocabulary");
				$("#input-search").attr('section', 'vocabulary');
				setLocalStorage('searchSelected','vocabulary');
				break;
			case 'grammar':
				$("#select-search-button span").text("Grammar");
				$("#input-search").attr('section', 'grammar');
				setLocalStorage('searchSelected','grammar');
				break;
			}
		}
		
		
		//$("#input-search").attr('section');
		$("#select-search").change(function() {
			$("select option:selected").each(function() {
				switch ($(this).val()) {
				case 'kanji':
					$("#title-page").text('Tìm kiếm kanji');
					$("#input-search").attr('section', 'kanji');
					setLocalStorage('searchSelected','kanji');
					break;
				case 'vocabulary':
					$("#title-page").text('Tìm kiếm từ vựng');
					$("#input-search").attr('section', 'vocabulary');
					setLocalStorage('searchSelected','vocabulary');
					break;
				case 'grammar':
					$("#title-page").text('Tìm kiếm ngữ pháp');
					$("#input-search").attr('section', 'grammar');
					setLocalStorage('searchSelected','grammar');
					break;
				}
			});
		});
		
		$("#btnSearch").click(function() {
			var type = $("#input-search").attr('section');
			var string =  $("#input-search").val(); 
			if(string == null || string == ''){
				alert('vui long nhat tu can tim vao');
			}else{
				$('#vocabulary-list').empty();
				$('#kanjiListView').empty();
				$('#grammar-list').empty();
				connectDB(type,string);
			}
		});
		
		
		$(".ui-input-clear").click(function() {
			$('#vocabulary-list').empty();
			$('#kanjiListView').empty();
			$('#grammar-list').empty();
		});
	});
</script>
</head>

<body>

	<div data-role="page" class="jqm-demos" id="panel-fixed-page1"
		data-title="Panel fixed positioning" data-url="panel-fixed-page1">

		<!-- Start header -->
		<div data-role="header" data-position="fixed" data-theme="b">
			 <a  href="index.html" data-ajax="false"  class="ui-btn ui-btn-left ui-mini ui-btn-inline ui-corner-all ui-btn-icon-left ui-icon-home">Home</a>
			<h1 id="title-page">
				<center>Tìm kiếm</center>
			</h1>
		</div>
		<!-- /header -->

		<!-- Start main content -->
		<div role="main" class="ui-content jqm-content jqm-fullwidth">
			<div id="search-control">
				<select name="select-custom-1" id="select-search"
					data-native-menu="false">
					<option value="vocabulary">Vocabulary</option>
					<option value="kanji">Kanji</option>
					<option value="grammar">Grammar</option>
				</select>
				<fieldset class="ui-grid-a">
					<div class="ui-block-a">
						<input placeholder="Nhập từ cần tìm" type="search" name="search-8"
							id="input-search" section="vocabulary" >
					</div>
					<div class="ui-block-b">
						<button id="btnSearch" type="submit" data-theme="b">Tìm</button>
					</div>
				</fieldset>
			</div>

			<div id="search-result">
				<!-- vocabulary -->
				<div data-role="collapsibleset" data-theme="a"
					data-content-theme="b">
					<ol data-role="listview" id="vocabulary-list">
					</ol>
				</div>
				<!-- /End vocabulary -->

				<!-- kanji -->
				<ol data-role="listview" id="kanjiListView" class="split-list">
				</ol>
				<!-- /end kani -->

				<!-- grammar -->
				<ol data-role="listview" id="grammar-list" class="split-list">
				</ol>
				<!-- end grammar -->
			</div>



		</div>
	</div>
	<!-- /content -->
	</div>
</body>
</html>
